<script setup lang='ts'>
import { ref, onMounted, watch, inject } from 'vue';
import { XbsjEarthUi } from "../../../../scripts/xbsjEarthUi"
import { getDistancesFromPositions } from "xbsj-xe2/dist-node/xe2-base-objects"
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const props = withDefaults(defineProps<{
    modelValue?: number,
    readonly?: boolean,
    name?: string,
    defaultValue: any
}>(), { withUndefined: true, readonly: false, propertyName: '属性值' })
// console.log(props.name);
function hasDecimalPoint(num: number) {
    return num.toString().includes('.');
}

const emits = defineEmits(["update:modelValue"]);
const inputHandler = (e: any) => {
    let target = Number(e.target.value)
    if (props.name === '线条流速' || props.name === '流速' || props.name === '材质速度' || props.name === '水流速度' || props.name === '宽高比' || props.name === '轮廓宽度' || props.name === '点位大小' || props.name === '点大小' || props.name === '半径' || props.name === '最小可见距离' || props.name === '最大可见距离') {
        if (target < 0) {
            target = 1
        }
    }
    if (props.name === '层级序号') {
        const a = hasDecimalPoint(target)
        if (a) {
            target = Math.floor(target)
        }
    }

    emits('update:modelValue', target)
}
const resetDefult = () => {
    emits('update:modelValue', props.defaultValue)
}
const setDistance = async () => {
    const treeItem = xbsjEarthUi.propSceneTree
    if (!treeItem) return
    const sceneObject = treeItem.sceneObject
    if (!sceneObject) return
    const position = sceneObject.position as [number, number, number]
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    const cameraPosition = await viewer.getCurrentCameraInfo()
    if (cameraPosition && cameraPosition.position) {
        const distance = getDistancesFromPositions([[...position], [...cameraPosition.position]], 'NONE')[0]
        emits('update:modelValue', distance)
    }
}
const unit = ref('m')
const extent = ref()
watch(() => props.modelValue, (val) => {
    extent.value = Number(val?.toFixed(2))
}, { immediate: true })
onMounted(() => {
    if (props.name === '面积') {
        unit.value = 'm²'
    } else {
        unit.value = 'm'
    }
})
const change = () => {
    if (unit.value === 'm²') {
        unit.value = 'km²'
        if (props.modelValue) {
            extent.value = (props.modelValue / 1000000).toFixed(2)
        }
    } else if (unit.value === 'km²') {
        unit.value = 'm²'
        extent.value = props.modelValue?.toFixed(2)
    } else if (unit.value === 'm') {
        unit.value = 'km'
        if (props.modelValue) {
            extent.value = (props.modelValue / 1000).toFixed(2)
        }
    } else if (unit.value === 'km') {
        unit.value = 'm'
        extent.value = props.modelValue?.toFixed(2)
    }
}
const mouseFlag = ref(false)
const mouseDistanceFlag = ref(false)
const newValue = ref()
watch(() => props.modelValue, (val: any) => {
    newValue.value = val
    mouseFlag.value = false
}, { immediate: true })
watch(newValue, () => {
    if (props.name === '线条流速' || props.name === '流速' || props.name === '材质速度' || props.name === '水流速度' || props.name === '宽高比' || props.name === '轮廓宽度' || props.name === '点位大小' || props.name === '点大小' || props.name === '半径' || props.name === '最小可见距离' || props.name === '最大可见距离') {
        if (newValue.value < 0) {
            newValue.value = 1
        }
    }
    if (props.name === '层级序号') {
        const a = hasDecimalPoint(newValue.value)
        if (a) {
            newValue.value = Math.floor(newValue.value)
        }
    }
})
</script>

<template>
    <div class="number_prop" v-if="name === '面积' || name === '周长' || name === '长度'">
        <div class="number_prop_input"><input type="number" class="input_number" :disabled="readonly" :value="extent"
                :style="{ cursor: `${readonly ? 'no-drop' : 'default'}` }" /></div>

        <label :disabled="false" @click="change">{{ unit }}</label>
    </div>
    <div class="number_prop" v-else-if="name === '圆半径'">
        <div class="number_prop_input"><input type="number" class="input_number" :disabled="readonly" :value="extent"
                :style="{ cursor: `${readonly ? 'no-drop' : 'default'}` }" @input="inputHandler($event)" /></div>

        <label :disabled="false" @click="change">{{ unit }}</label>
        <div class="checkbox1">
            <div v-if="!readonly && defaultValue !== undefined && modelValue !== defaultValue" class="checkbox"
                @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true" @mouseout="mouseFlag = false">
                <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                    :size="14" />
            </div>
        </div>
    </div>
    <div class="number_prop" v-else>
        <div class="number_prop_input"><input type="number" class="input_number" :disabled="readonly" v-model="newValue"
                @input="inputHandler($event)" :style="{ cursor: `${readonly ? 'no-drop' : 'default'}` }" /></div>
        <div class="checkbox1">
            <div v-if="!readonly && defaultValue !== undefined && modelValue !== defaultValue" class="checkbox"
                @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true" @mouseout="mouseFlag = false">
                <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                    :size="14" />
            </div>
        </div>

        <div v-if="name === '最小可见距离' || name === '最大可见距离'" class="checkbox2" @click.stop.prevent="setDistance"
            @mouseover="mouseDistanceFlag = true" @mouseout="mouseDistanceFlag = false" title="设置为当前距离">
            <es-icon :name="'shezhi'" :color="mouseDistanceFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                :size="14" />
        </div>

    </div>

</template>

<style scoped>
.number_prop_input {
    flex: 1;
}

input {
    display: inline-block;
    width: 100%;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}

input:hover {
    border: 1px solid #2c68f7;
}

input:focus {
    border: 1px solid #2c68f7;
}

.number_prop {
    width: 100%;
    display: flex;
    align-items: center;
}

label {
    width: 30px;
    text-align: right;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
}


.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}

.checkbox1 {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-top: 2px;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.checkbox2 {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 10px;
}
</style>
